<template>
  <el-dialog :title="title" :model-value="prop.show">
    <el-form :model="formData">
      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名" prop="userName">
            <el-input placeholder="姓名" v-model="formData.name" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="昵称" prop="nickName">
            <el-input placeholder="昵称" v-model="formData.name" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <span class="dialog-footer">
          <el-button @click="handleClose()">取消</el-button>
          <el-button type="primary" @click="handleConfirm()">保存</el-button>
        </span>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import { DeptForm } from "@/api/sys/dept/index";

const formData = reactive<DeptForm>({
  name: "",
});

const prop = defineProps({
  title: String,
  show: Boolean,
});

const emits = defineEmits(["cancle", "submit"]);
const handleClose = () => {
  emits("cancle");
};

const handleConfirm = () => {
  emits("submit", formData);
};
</script>
